<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <div>
      <el-button
        v-if="isRole == 'agent'"
        type="success"
        round
        @click="dialogFormVisible = true"
        >提现</el-button
      >

      <el-dialog title="提现" :visible.sync="dialogFormVisible">
        <el-form :model="isForm">
          <el-form-item label="银行Name：" :label-width="formLabelWidth">
            <el-input
              v-model="isForm.name"
              autocomplete="off"
              placeholder="请填写银行卡Name"
              type="text"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="开户行：" :label-width="formLabelWidth">
            <el-input
              v-model="isForm.address"
              autocomplete="off"
              placeholder="请填写此银行卡的开户行地址"
              type="text"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="电话：" :label-width="formLabelWidth">
            <el-input
              v-model="isForm.phone"
              autocomplete="off"
              placeholder="请填写此银行卡在该银行的预留电话"
              type="phone"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="isFormEvent"
            >Request Withdrawal</el-button
          >
        </div>
      </el-dialog>
    </div>

    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />

    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="100px"
      dialogWidth="500px"
      :isHandle="true"
    />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      //提现按钮打开的form表单
      isRole: "",
      dialogFormVisible: false,
      isForm: {
        name: "",
        address: "",
        phone: ""
      },
      formLabelWidth: "120px",

      searchData: {
        agentName: "",
        agentPhone: "",
        status: "",
        beginTime: "",
        endTime: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Agent Name",
          prop: "agentName",
          width: 200,
          isShow: e => sessionStorage.role == "operator"
        },
        {
          type: "input",
          placeholder: "Phone",
          prop: "agentPhone",
          width: 200,
          isShow: e => sessionStorage.role == "operator"
        },
        // {
        // 	type: 'daterange',
        // 	placeholder: 'Application Time',
        // 	prop: 'date',
        // 	width: 300,
        // 	change: e => {
        // 		if (e) {
        // 			this.searchData.beginTime = e[0]
        // 			this.searchData.endTime = e[1]
        // 		} else {
        // 			this.searchData.beginTime = ''
        // 			this.searchData.endTime = ''
        // 		}
        // 	}
        // },
        {
          type: "date",
          placeholder: "Start Date",
          prop: "beginTime",
          width: 170,
          change: val => {
            this.searchData.beginTime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Date",
          prop: "endTime",
          width: 170,
          change: val => {
            this.searchData.endTime = val;
          }
        },
        {
          type: "select",
          placeholder: "审核结果",
          prop: "status",
          width: 200,
          options: [
            { label: "Pending Review", value: "1" },
            { label: "已Pass", value: "2" },
            { label: "不Pass", value: "3" }
          ]
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => this.getData()
        }
        // {type:'primary',label:'Reset', handle: e => this.elFormSubmit(),}
      ],
      tableLoading: false,
      tableData: [{}],
      tableCols: [
        { label: "ID", prop: "id" },
        {
          label: "Agent Name",
          prop: "agentName",
          isShow: e => sessionStorage.role == "operator"
        },
        // { label: "Agent联系人", prop: "nickName",  },
        {
          label: "AgentPhone",
          prop: "agentPhone",
          isShow: e => sessionStorage.role == "operator"
        },
        { label: "Withdrawal Amount", prop: "money" },
        { label: "提现信息", prop: "openId" },
        // { label: "CurrentBalance", prop: "isVip_des",  },
        { label: "Application Time", prop: "ctime" },
        { label: "提现到账时间", prop: "checkTime" },
        {
          label: "审核结果",
          prop: "status",
          formatter: e => {
            if (e.status == 1) {
              return "Pending Review";
            } else if (e.status == 2) {
              return "已Pass";
            } else if (e.status == 3) {
              return "不Pass";
            }
          }
        },
        {
          label: "Operations",
          type: "button",
          width: 200,
          isShow: e => sessionStorage.role == "operator",
          btnList: [
            {
              label: "Pass",
              type: "text",
              handle: row => {
                this.$confirm("确定Pass提现申请吗?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    const res = await this.apis.withdrawRecord_check({
                      id: row.id,
                      status: 2
                    });

                    this.$message({
                      message: "OperationsSuccess！",
                      type: "success"
                    });
                    this.getData();
                  })
                  .catch(() => {});
              }
            },
            {
              label: "驳回",
              type: "text",
              handle: row => {
                this.formData.money = "";
                this.formData.id = row.id;
                this.formData.money = row.money;
                this.elFormVisible("驳回");
              }
            }
          ]
        }
      ],
      tableHandles: [
        // {
        //   label: "DataExport",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
      ],
      pagination: { limit: 10, offset: 1, total: 1 },

      checkBox: [],

      formData: {
        id: "",
        status: 3, //1Pending Review，2Pass ，3不Pass
        rejectReason: "",
        money: ""
      },
      formCols: [
        {
          type: "input",
          label: "驳回原因",
          width: 350,
          prop: "rejectReason",
          rmblock: true,
          remark: ""
        }
      ],
      formRules: {
        rejectReason: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => {
            console.log(444444444, e);
            this.elFormSubmit();
          }
        }
      ]
    };
  },
  watch: {},
  created() {
    this.isRole = sessionStorage.role;
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 打开提现form表单
    isFormEvent() {
      this.dialogFormVisible = false;
      console.log(
        1111,
        this.isForm.name,
        this.isForm.address,
        this.isForm.phone
      );
    },
    async getData() {
      var res = await this.apis.withdrawRecord_list({
        agentPhone: this.searchData.agentPhone,
        agentName: this.searchData.agentName,
        status: this.searchData.status,
        beginTime: this.searchData.beginTime,
        endTime: this.searchData.endTime,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      });
      console.log(res);
      var list = res.rows || [];
      this.tableData = list;
      this.pagination.total = res.total;
    },
    async elFormSubmit(row) {
      console.log(22222, row);
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await this.apis.withdrawRecord_check(this.formData);

          this.$message({
            message: "OperationsSuccess！",
            type: "success"
          });
          this.getData();
          setTimeout(() => {
            this.elFormVisible();
          }, 1000);
        }
      });
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-dialog {
  width: 35% !important;

  input {
    width: 85%;
  }
}
</style>
